<!-- eslint-disable no-undef -->
<template>
  <div class="footer-container">

    <div class="footer-content">

      <p>
        系统为国家社会科学基金教育学一般课题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        “基础教育知识图谱构建方法与应用模型研究”（课题编号:BCA190087）研究成果之一
      </p>
      <p>
        Copyright © 2021-2022 All rights reserved. 南京师范大学教育科学学院
        版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Email：267440207@qq.com</p>
    </div>

    <el-popover
      placement="top-start"
      width="20"
      trigger="hover"
    >
      <p >访问次数：{{ visitData }}次</p>
      <el-button slot="reference" type="text" class="visitcount" icon="el-icon-s-data" ></el-button>
    </el-popover>

  </div>
</template>

<script>
import { VisitCount } from '@/api/visit'

export default {
  name: 'FooterMain',
  data() {
    return { visitData: '' }
  },
  created() {
    // 自动加载indexs方法
    this.visit()
  },
  methods: {
    visit() {
      VisitCount().then((response) => {
        if (response.data.code === 200) {
          this.visitData = response.data.data
        } else {
          this.$message.warning('服务器错误，请稍后刷新重试')
        }
      })
    }

  }
}

</script>

<style scoped>
.footer-container {
  display: flex;
  justify-content: center;
  height: 120px;
  width: 100%;
  background-color: #3f3c40;
  color: #fff;
  text-align: center;
  min-width: 1200px;
  position:relative;
}

.visitcount{
position:absolute;top:10px;right:240px;
float: right ;
 text-align: center;
 margin-top: 35px;
 margin-right: 10px;
 color: #fff;
  background-color: #3f3c40;
}
.footer-content {
  white-space:nowrap;
  margin: 1rem auto;
  width: 70%;
}

.footer-content p {
  margin-top: 0.5rem;
}
</style>
